forum

Home / DeveloperSection / Forums / Explain Inline vs. External Templates in knockout.js.

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

28-Jun-2024

Knockout.js Inline vs External Templates

Let's see the explanation of Inline template vs External template in knockout.js,

Inline Template

Inline templates in Knockout.js are defined directly in your HTML file, usually using a <script> tag with a specific attribute (text/html or text/x-knockout-template). These templates are built into HTML markup and can be referenced by Knockout.js bindings.

Example-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <title>Inline Template Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h3>Inline Template binding with knockout.js</h3>
                <hr>
                <div data-bind="template: { name: 'personTemplate', data: person }"></div>
            </div>
        </div>
    </div>
    <!-- inline template -->
    <script id="personTemplate" type="text/html">
        <div>
            <p>Name: <span data-bind="text: name" class="fw-semibold"></span></p>
            <p>Age: <span data-bind="text: age" class="fw-semibold"></span></p>
        </div>
    </script>
    <script>
    function PersonViewModel() {
        this.person = {
            name: 'John Doe',
            age: 30
        };
    }
    // apply bindings
    ko.applyBindings(new PersonViewModel());
    </script>
</body>
</html>


Explanation

  • The parameters for the id personTemplate are described in lines in the <script> tag.
  • It contains HTML markup with Knockout.js bindings (data-bind attributes).
  • The template binding on the <div> element specifies the name of the personTemplate by name attribute.
  • Knockout.js renders the template using data from the person object in the ViewModel.

Advantages
Simplicity- Inline templates are easy to define and maintain directly in an HTML file.
Readability- Dimensions appear next to the rest of the HTML markup, making it clear how they are used.

Also, Read: What are custom bindings in Knockout.js?


External Templates

In Knockout.js, external templates are stored in files and dynamically loaded into the application. They are either generated via AJAX or embedded as part of the application process. This approach separates HTML markup from JavaScript logic, encouraging better design and maintenance.

Example-

productTemplate.html

<div id="productTemplate" data-bind="if: name" >
    <h3 data-bind="text: name"></h3>
    <p data-bind="text: description"></p>
    <p><strong>Price:</strong> $<span data-bind="text: price.toFixed(2)"></span></p>
</div>

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    <title>External Template Example</title>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h3>External Template binding with knockout.js</h3>
                <hr>
                <div data-bind="template: { name: 'productTemplate', foreach: products}"></div>
             
            </div>
        </div>
    </div>

    <script>

        function Product(name, description, price) {
            this.name = name;
            this.description = description;
            this.price = price;
        }            

        // Load external template using jQuery
                $.get('productTemplate.html', function(templateContent) {
                // bind the template with jQuery
                $('body').append(templateContent);

                function MyViewModel() {
                    var self = this;

                    self.products = ko.observableArray([
                        new Product('Chair', 'Comfortable chair for sitting.', 49.99), new Product('Table', 'Sturdy table for working.', 129.99), new Product('Lamp', 'Bright lamp for reading.', 19.99) ]); } // Initialize the view model and apply bindings ko.applyBindings(new MyViewModel()); }); </script> </body> </html>


Output-

answer 6518922806010534

 

Also, Read: Conditional html heading tag based on variable in knockout.js

MindStick Training

Liked By